import Vue from 'vue';
import VModal from 'vue-js-modal';
import Axios from 'axios';
import Qs from 'qs';
Vue.use(VModal,{dialog:true});
export default {
    template:` 
                <div id="add-skin" class="row col-xs-6">
                    <form @submit.prevent="submit">
                      <div class="form-group">
                        <label for="name">皮肤名称</label>
                        <input type="text" class="form-control" v-model.trim="data.name" id="name" placeholder="皮肤名" />
                      </div>
                      <div class="form-group">
                        <label for="value">皮肤标识</label>
                        <input type="text" class="form-control" v-model.trim="data.value" id="value" placeholder="皮肤标识" />
                      </div>
                      <button type="submit" class="btn btn-default">添加皮肤</button>
                    </form>
                    
                    <v-dialog style="z-index:99999999999;" />
                </div> 
            `,
    data:function(){
        return {
            url:$('#louie').attr('data-url'),
            data:{
                name:"",
                value:""
            }
        }
    },
    methods: {
        submit:function(){
            if(this.data.name == ""){
                this.alert("皮肤名称不能为空");
                return false;
            }
            if(this.data.name.length > 5){
                this.alert("皮肤名称长度不能大于5");
                return false;
            }
            if(this.data.value == ""){
                this.alert("皮肤标识不能为空");
                return false;
            }
            if(this.data.value.length != 32){
                this.alert("请输入正确的皮肤标识");
                return false;
            }
            Axios.post(this.url,Qs.stringify({
                pages:"mapSkin",
                doing:"add",
                data:this.data
            }))
                .then((res)=>{
                    if(res.data.status == "success"){
                        this.alert("添加成功");
                        this.data = {name:"",value:""};
                    }else{
                        this.alert("添加失败");
                    }
                });
        },
        //alert
        alert:function(text,call){
            var self = this;
            this.$modal.show('dialog',{
                text:text,
                buttons:[
                    {
                        title:'关闭',
                        handler:function(){
                            self.$modal.hide('dialog');
                            typeof call =='function' && call();
                        }
                    },
                ]
            });
        },
    }
};